import React from 'react';
import {connect} from 'react-redux';
import {Redirect} from 'react-router-dom';
import Logo from '../../component/logo/Logo';
import {List, InputItem, WingBlank, WhiteSpace, Button} from 'antd-mobile';
import {login} from '../../redux/user.redux';
import funForm from '../../component/form/form';

@connect(
    state => state.user,
    {login}
)
@funForm
class Login extends React.Component {

    constructor(props) {
        super(props);
        this.register = this.register.bind(this);
        this.login = this.login.bind(this);
        // this.state = {
        //     user: '',
        //     pwd: ''
        // };
    }

    // handleChange(key, val) {
    //     this.setState({
    //         [key]: val
    //     })
    // }

    register() {
        this.props.history.push('/register');
    }

    login() {
        this.props.login(this.props.state);
    }

    render() {
        return (
            <div>
                {this.props.redirectTo ? <Redirect to={this.props.redirectTo}/> : null}
                <Logo/>
                <WingBlank>
                    {this.props.msg ? <p className='error-msg'>{this.props.msg}</p> : null}
                    <List>
                        <InputItem onChange={(v) => this.props.handleChange('user', v)}>用户</InputItem>
                        <InputItem type='password' onChange={(v) => this.props.handleChange('pwd', v)}>密码</InputItem>
                    </List>
                    <WhiteSpace/>
                    <Button type='primary' onClick={this.login}>登录</Button>
                    <WhiteSpace/>
                    <Button type='primary' onClick={this.register}>注册</Button>
                </WingBlank>
            </div>
        )
    }
}

export default Login;